<template>
  <div class="chen-study-page">
    <!-- Hello World 标题区域 -->
    <div class="hello-world-section">
      <a-card title="Hello World!" class="hello-card">
        <div class="hello-content">
          <h1 class="hello-title">🎉 Hello World! 🎉</h1>
          <p class="hello-subtitle">欢迎来到陈先生的学习页面</p>
          <div class="hello-description">
            <p>这是一个演示页面，展示了AnyTable组件的使用方法</p>
            <p>包含了基础的表格功能、搜索、分页等特性</p>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 表格演示区域 -->
    <div class="table-demo-section">
      <a-card title="AnyTable 表格演示" class="table-card">
        <AnyTable
          :tableColumns="tableColumns"
          :dataLoader="loadTableData"
          :autoLoad="true"
          :tableRowKey="'id'"
          :pageSize="10"
          :showQuickJumper="true"
          @loadComplete="handleLoadComplete"
        >
          <!-- 搜索区域 -->
          <template #tableSearch>
            <a-form layout="inline" class="search-form">
              <a-form-item label="姓名">
                <a-input
                  v-model:value="searchParams.name"
                  placeholder="请输入姓名"
                  allowClear
                  @change="handleSearch"
                />
              </a-form-item>
              <a-form-item label="状态">
                <a-select
                  v-model:value="searchParams.status"
                  placeholder="请选择状态"
                  allowClear
                  style="width: 120px"
                  @change="handleSearch"
                >
                  <a-select-option value="active">活跃</a-select-option>
                  <a-select-option value="inactive">非活跃</a-select-option>
                  <a-select-option value="pending">待审核</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="handleSearch">
                  <SearchOutlined />
                  搜索
                </a-button>
                <a-button style="margin-left: 8px" @click="handleReset">
                  <ReloadOutlined />
                  重置
                </a-button>
              </a-form-item>
            </a-form>
          </template>

          <!-- 工具栏 -->
          <template #tableToolbar>
            <a-space>
              <a-button type="primary" @click="handleAdd">
                <PlusOutlined />
                新增
              </a-button>
              <a-button @click="handleBatchDelete">
                <DeleteOutlined />
                批量删除
              </a-button>
            </a-space>
          </template>

          <!-- 表格单元格自定义 -->
          <template #tableCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button type="link" size="small" @click="handleEdit(record)">
                  编辑
                </a-button>
                <a-button type="link" size="small" @click="handleView(record)">
                  查看
                </a-button>
                <a-popconfirm
                  title="确定要删除这条记录吗？"
                  @confirm="handleDelete(record)"
                >
                  <a-button type="link" size="small" danger>
                    删除
                  </a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </AnyTable>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { SearchOutlined, ReloadOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import AnyTable from '@/components/AnyTable.vue'

// 搜索参数
const searchParams = reactive({
  name: '',
  status: undefined
})

// 表格列配置
const tableColumns = ref([
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80,
    visible: true
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 120,
    visible: true
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
    width: 200,
    visible: true
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    width: 130,
    visible: true
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
    visible: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 180,
    visible: true
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    visible: true,
    fixed: 'right'
  }
])

// 模拟数据
const mockData = [
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '13800138001',
    status: 'active',
    createTime: '2024-01-15 10:30:00'
  },
  {
    id: 2,
    name: '李四',
    email: 'lisi@example.com',
    phone: '13800138002',
    status: 'inactive',
    createTime: '2024-01-14 15:20:00'
  },
  {
    id: 3,
    name: '王五',
    email: 'wangwu@example.com',
    phone: '13800138003',
    status: 'pending',
    createTime: '2024-01-13 09:45:00'
  },
  {
    id: 4,
    name: '赵六',
    email: 'zhaoliu@example.com',
    phone: '13800138004',
    status: 'active',
    createTime: '2024-01-12 14:15:00'
  },
  {
    id: 5,
    name: '钱七',
    email: 'qianqi@example.com',
    phone: '13800138005',
    status: 'inactive',
    createTime: '2024-01-11 11:30:00'
  }
]

// 加载表格数据
const loadTableData = async (params: any) => {
  await new Promise(resolve => setTimeout(resolve, 500))
  
  let filteredData = [...mockData]
  
  if (searchParams.name) {
    filteredData = filteredData.filter(item => 
      item.name.toLowerCase().includes(searchParams.name.toLowerCase())
    )
  }
  
  if (searchParams.status) {
    filteredData = filteredData.filter(item => item.status === searchParams.status)
  }
  
  const { pageNumber, pageSize } = params
  const start = (pageNumber - 1) * pageSize
  const end = start + pageSize
  const records = filteredData.slice(start, end)
  
  return {
    records,
    total: filteredData.length,
    pageNumber,
    pageSize
  }
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    active: 'green',
    inactive: 'red',
    pending: 'orange'
  }
  return colorMap[status] || 'default'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    active: '活跃',
    inactive: '非活跃',
    pending: '待审核'
  }
  return textMap[status] || status
}

// 搜索处理
const handleSearch = () => {
  message.success('搜索条件已更新')
}

// 重置搜索
const handleReset = () => {
  searchParams.name = ''
  searchParams.status = undefined
  message.success('搜索条件已重置')
}

// 新增
const handleAdd = () => {
  message.info('点击了新增按钮')
}

// 编辑
const handleEdit = (record: any) => {
  message.info(`编辑记录: ${record.name}`)
}

// 查看
const handleView = (record: any) => {
  message.info(`查看记录: ${record.name}`)
}

// 删除
const handleDelete = (record: any) => {
  message.success(`删除记录: ${record.name}`)
}

// 批量删除
const handleBatchDelete = () => {
  message.info('批量删除功能')
}

// 数据加载完成回调
const handleLoadComplete = (response: any) => {
  console.log('表格数据加载完成:', response)
}
</script>

<style scoped>
.chen-study-page {
  padding: 24px;
}

.hello-world-section {
  margin-bottom: 24px;
}

.hello-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.hello-content {
  text-align: center;
  padding: 20px 0;
}

.hello-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 16px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hello-subtitle {
  font-size: 1.2rem;
  margin-bottom: 16px;
  opacity: 0.9;
}

.hello-description {
  font-size: 1rem;
  opacity: 0.8;
  line-height: 1.6;
}

.table-demo-section {
  margin-bottom: 24px;
}

.table-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-form {
  margin-bottom: 16px;
}

.search-form .ant-form-item {
  margin-bottom: 16px;
}
</style> 